<template>
	<el-dialog v-if="showNewTask" :show-close='false' :visible.sync="showNewTask" @close="close" width="70%" class="taskTemplateDailog"
	 :close-on-click-modal='false'>

		<span slot="title" class="dialog-title">
		  	{{ newTaskTitle[nowTab] }}
				<el-button  size="mini" class="popupClose" @click="close">关闭</el-button>
		</span>
		<!--{{newTaskData}}-->
		<keep-alive>
			<component v-bind.sync="newTaskData" :createType.sync=createType ref="newTaskChild" v-bind:is="nowTab" class="tab"></component>
		</keep-alive>
	</el-dialog>
</template>

<script>
	import newWay from './newTaskChildren/newWay'
	import taskModel from './newTaskChildren/taskModel' //选中模板
	import taskBasicInfo from './newTaskChildren/taskBasicInfo'
	import addCheckItem from './newTaskChildren/addCheckItem'
	import sampleInfo from './newTaskChildren/sampleInfo'
	import selectCheckPiont from './newTaskChildren/selectCheckPiont'
	import addQc from './newTaskChildren/addQc'
	export default {
		props: ['newTaskShow', 'newTaskData', 'pnowTab', 'newTaskTitle', 'createType'],
		data() {
			return {
				widthArr: {
					newWay: '30%',
					taskModel: '50%',
					taskBasicInfo: '50%',
					addCheckItem: '65%',
					sampleInfo: '65%',
					addQc: '65%',
					selectCheckPiont: '65%',
				},
				nowTab: 'newWay'

			}
		},
		components: {
			newWay, taskModel, taskBasicInfo, addCheckItem, sampleInfo, selectCheckPiont, addQc
		},
		computed: {
			showNewTask: {
				get: function () {
					return this.newTaskShow
				},
				set: function (newValue) {

				}
			}
		},
		mounted() {
			// console.log(sampleInfo)
		},
		updated() {

		},
		destoryed() {

		},
		methods: {
			changeTab(tab) {

				this.nowTab = tab
				if (this.nowTab == 'selectCheckPiont') {
					this.$nextTick(() => {
						// 到第二步的时候重新调用监测点的接口
						this.$refs.newTaskChild.readMonitors(this.newTaskData.newTaskBasic.client)

					})
				}
				if (this.nowTab == 'addCheckItem') { //如果是采样 没有第五步
					this.$nextTick(() => {
						// 到第二步的时候重新调用监测点的接口
						this.$refs.newTaskChild.isSource()
					})
				}
			},
			close() {
				this.$emit('update:newTaskShow', false)
				if (this.createType == '任务创建') {
					this.nowTab = 'newWay'
				} else {
					this.nowTab = 'taskBasicInfo'
				}
				//				this.nowTab = 'newWay'
			},
			showTaskDetail() {
				// console.log(this.newTaskData)
			},
			showNewTaskData() {
				// console.log(this.newTaskData)
			},
			planHandleBottle(params) {

				return new Promise((resolve, reject) => {
					this.$http({
						method: 'post',
						apiUrl: '/detection/planHandleBottle.htm',
						params: params,
						isJson: true,
					}).then(res => {
						if (res.code === 0) {
							resolve(res)
						} else {
							reject(err)
						}
					}, )
				})

			},
			createSampleInfo() {
				return new Promise((resolve, reject) => {
					let sampleBeans = this.newTaskData.newTaskBasic.sampleBeans = [];
					let params = this.newTaskData.newTaskItemList.map((item) => { return { detectability: item.detectability } })
					this.planHandleBottle(params).then((res) => {
						
						//			  			row.psDetailBeans = res.data
						for (let i of this.newTaskData.newTaskPointList) {
							i.detectBeans = JSON.parse(JSON.stringify(this.newTaskData.newTaskItemList))
							i.bottle = res.data
							// i.sampleDetailBeans = JSON.parse(JSON.stringify(this.newTaskData.newTaskMeterialList))
							sampleBeans.push(i)
						}
						resolve(res)
					})

				})
			}
		},
		watch: {
			pnowTab() {
				this.nowTab = this.pnowTab
			}
		}
	}

</script>

<style>
	.taskTemplateDailog .el-dialog {
		margin-top: 10vh !important;
		height: 80%;
	}

	.taskTemplateDailog .el-dialog .el-dialog__body {
		height: calc(100% - 85px);
		padding: 10px;
	}

	.taskTemplateDailog .el-dialog .el-dialog__body .createStep {
		height: 100%;
		overflow: auto;
	}

	.taskTemplateDailog .el-row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.taskTemplateDailog .el-form-item {
		margin-bottom: 15px;
		width: 100%;
	}

	.taskTemplateDailog .el-form-item__content {
		width: calc(100% - 100px);
	}

	.taskTemplateDailog .tab {
		height: 100%;
	}

	.taskTemplateDailog .commonFooter {
		position: absolute;
		right: 15px;
		bottom: 15px;
	}
</style>